<script setup>
import ChildView from "./ChildView.vue";
import { ref, provide } from "vue";
const user = ref({
  name: "jay",
  age: 18,
});
// 接收子组件传递过来的数据
const cc = (m) => {
  user.value.name = m;
};

const aa = (val) => {
  user.value.age = val;
};
// 在vue三中，组件默认是关闭的，意思是外面无法访问组件内部任何数据和方法
// 可以使用defineExpose向外暴露指定的数据和方法
const childRef = ref();
console.log(childRef);

// 跨组件通信provide、inject
provide("name", "jjjj");
provide("user", user.value);
</script>

<template>
  <div>
    父组件
    <!-- 
    如果给 原生的html标签绑定ref属性，那么获取到的就是DOM对象
    如果给自定组件绑定ref属性，那么获取到的就是子组件的实例
    -->
    
    <ChildView
      ref="childRef"
      @update:name="cc"
      @update:age="aa"
      msg="hi"
      :user="user"
    />
  </div>
</template>

<style scoped></style>
